[#macro productUpdateView]
<div class="model-form">
    <el-page-header @back="goBack" content="更新商品">
    </el-page-header>
    <div class="model-content">
        <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
            <el-row :gutter="10">
                <el-col :span="22">
                    <el-form-item label="商品封面" size="mini" prop="logo">
                        <avatar v-model="form.logo"></avatar>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品名称" size="mini" prop="name">
                        <el-input v-model="form.name" name="name">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="商家名称" size="mini" prop="shop">
                        <el-select @change="changeShop" style="width: 100%;" v-model="form.shop" filterable clearable placeholder="请选择">
                            <el-option v-for="item in shopOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品分类" size="mini" prop="productCatalog">
                        <el-cascader @change="changeProductCatalog" style="width: 100%;" :options="productCatalogOptions" v-model="productCatalogs" filterable clearable
                            placeholder="请选择">
                        </el-cascader>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品分组" size="mini" prop="productGroup">
                        <el-select style="width: 100%;" v-model="form.productGroup" filterable clearable
                            placeholder="请选择">
                            <el-option v-for="item in groupOptions" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品编码" size="mini" prop="barCode">
                        <el-input v-model="form.barCode" name="barCode">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品简介" size="mini" prop="summary">
                        <el-input v-model="form.summary" name="summary">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="22">
                    <el-form-item label="是否开启规格" size="mini" prop="skuEnable">
                        <el-switch v-model="form.skuEnable">
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="22" v-if="form.skuEnable">
                    <template v-for="(item, index)  in specs">
                        <el-form-item size="mini" :label="'规格' + index" :key="item.key">
                            <div>
                                <el-input v-model="item.name" style="width: 500px;"></el-input>
                                <el-button @click.prevent="removeSpec(index)">删除</el-button>
                            </div>
                            <div style="margin:8px 5px">
                                <template v-for="(temp,j)  in item.values">
                                    <div style="margin:6px 5px;display: inline-block;">
                                        <el-input @change="updateSpecValue(index,j)" v-model="temp.name"
                                            style="width: 200px;display: inline-block;">
                                        </el-input>
                                        <el-button @click.prevent="removeSpecValue(index,j)" type="danger"
                                            style="margin-right: 15px;">删除</el-button>
                                    </div>
                                </template>
                                <el-button @click.prevent="addSpecValue(index)">添加规格值</el-button>
                            </div>

                        </el-form-item>
                    </template>
                    <el-form-item label="" size="mini">
                        <el-button @click.prevent="addSpec(index)" v-if="specs.length<3">添加规格</el-button>
                    </el-form-item>



                </el-col>
                <el-col :span="22" v-if="form.skuEnable">
                    <el-form-item label="规格详情" size="mini">
                        <el-table  :data="skus" style="width: 100%;font-size: 12px;">
                            <el-table-column label="sku名称" prop="name" width="150">
                            </el-table-column>
                            <el-table-column label="市场价" prop="marketPrice" sortable="custom" width="200">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.marketPrice" size="mini" name="sortNum" :min="0"
                                        :max="10000">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="成本价" prop="costPrice" width="200">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.costPrice" size="mini" name="costPrice" :min="0"
                                        :max="10000">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="销售价" prop="salePrice" width="200">
                                <template slot-scope="scope">
                                    <el-input-number v-model="scope.row.salePrice" size="mini" name="salePrice" :min="0"
                                        :max="10000">
                                    </el-input-number>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>

                </el-col>
                <el-col :span="12" v-if="!form.skuEnable">
                    <el-form-item label="销售价" size="mini" prop="salePrice">
                        <el-input v-model="form.salePrice" name="salePrice">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12" v-if="!form.skuEnable">
                    <el-form-item label="市场价" size="mini" prop="marketPrice">
                        <el-input v-model="form.marketPrice" name="marketPrice">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12" v-if="!form.skuEnable">
                    <el-form-item label="成本价" size="mini" prop="costPrice">
                        <el-input v-model="form.costPrice" name="costPrice">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="积分" size="mini" prop="score">
                        <el-input v-model="form.score" name="score">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="vip价" size="mini" prop="vipPrice">
                        <el-input v-model="form.vipPrice" name="vipPrice">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="库存量" size="mini" prop="inventory">
                        <el-input v-model="form.inventory" name="inventory">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="库存预警值" size="mini" prop="warningValue">
                        <el-input v-model="form.warningValue" name="warningValue">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="毛重" size="mini" prop="weight">
                        <el-input v-model="form.weight" name="weight">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="净重" size="mini" prop="netWeight">
                        <el-input v-model="form.netWeight" name="netWeight">
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="22">
                    <div style="margin-left: 160px;">
                        <div id="uenote" name="note" type="text/plain"></div>
                    </div>

                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
                    <el-button @click="goBack">取消</el-button>
                    <el-button type="primary" @click="updateData">确定</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</div>
[/#macro]

[#macro productUpdateConfig]
<script type="text/x-template" id="my-product-update">
    [@productUpdateView /]
</script>
<script type="text/javascript">
    //更新组件开始
    var uenote;
    var productUpdateConfig = {};
    productUpdateConfig.template = "#my-product-update";
    productUpdateConfig.methods = config.basicMethod();
    productUpdateConfig.methods.updateData = function () {
        var self = this;
        this.$refs["ruleForm"].validate(function (valid) {
            if (valid) {
                self.updateDataPost();
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    }
    productUpdateConfig.methods.changeShop = function (item) {
        this.groups = [];
        this.form.productGroup="";
        this.loadGroups(item);

    };
    productUpdateConfig.methods.changeProductCatalog = function (item) {
        console.info(item);
        if(item.length>0){
            this.form.productCatalog=item[item.length-1];
        }

    };
    
    productUpdateConfig.methods.loadGroups = function (shop) {
        var self = this;
        var param = {};
        param.sortMethod = "asc";
        param.sortField = "id";
        param.level = 1;
        param.size = 500;
        param.shop = shop;
        $.post("${siteurl}tenantRest/productgroup/list.htm", param, function (result) {
            if (result.code == 0) {
                self.groupOptions = result.list;
            }
        });

    };
    productUpdateConfig.methods.addSpec = function () {

        this.specs.push({
            name: '',
            values: [],
            key: Date.now()
        });
    }

    productUpdateConfig.methods.updateSku = function () {
        var specList = [];

        for (let index = 0; index < this.specs.length; index++) {
            const element = this.specs[index];
            specList.push(element.values);
        }
        var specResult = descartes(specList);
        var skus = [];
        for (let index = 0; index < specResult.length; index++) {
            var x = specResult[index].map(item => item.name);
            var element = x.join("_");
            var temp = {};
            temp.list = specResult[index];
            temp.price = "";
            temp.mealFee = "";
            temp.name = element;
            temp.stockNum = "";
            skus.push(temp);
        }
        this.skus = skus;
    }
    productUpdateConfig.methods.addSpecValue = function (item) {

        var temp = this.specs[item];
        if (temp.values == undefined || temp.values == null) {
            temp.values = [];
        }
        temp.values.push({ name: "" });
        this.updateSku();

    }
    productUpdateConfig.methods.removeSpecValue = function (item, index) {

        var temp = this.specs[item];
        if (index > -1) {
            temp.values.splice(index, 1)
        }
        this.updateSku();

    }
    productUpdateConfig.methods.updateSpecValue = function (item, select) {
        var self = this;
        var temp = this.specs[item];
        var selectTemp = this.specs[item].values[select];
        if (select > -1) {
            for (let index = 0; index < temp.values.length; index++) {
                var element = temp.values[index];
                if (select != index) {
                    if (element.name == selectTemp.name) {
                        self.$message.error("不能出现相同的规格值");
                        selectTemp.name = "";
                    }
                }

            }
        }
        this.updateSku();

    }


    productUpdateConfig.methods.removeSpec = function (item) {
        if (item > -1) {
            this.specs.splice(item, 1)
        }
    };

    productUpdateConfig.methods.updateDataPost = function () {
        var self = this, data = this.form;
        //delete data.productCatalog;
        if (this.deforeUpdateData) {
            this.deforeUpdateData();
        }
        if (uenote) {
            data.note = uenote.getContent();
        }
        this.postJsonData("${siteurl}tenantRest/product/update.htm", data, function (res) {
            if (res.code == 0) {
                self.$message({
                    message: '修改数据成功',
                    type: 'success'
                });
                //window.history.go(-1)
                self.$router.go(-1);
            } else {
                self.$message.error(res.msg);
            }
        });
    }
    productUpdateConfig.data = function () {
        return {
            form: {
                logo: '',
                name: '',
                shop: '',
                productCatalog: '',
                productGroup: '',
                barCode: '',
                summary: '',
                skuEnable: false,
                salePrice: '',
                marketPrice: '',
                costPrice: '',
                score: '',
                vipPrice: '',
                inventory: '',
                warningValue: '',
                weight: '',
                volume: '',
                netWeight: '',
                height: '',
                width: '',
                length: '',
                note: ''
            },
            specs: [{ name: "", values: [] }],
            groupOptions: [],
            productCatalogs:[],
            skus: [],
            rules: {
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                shop: [
                    { required: true, message: '请输入商家名称', trigger: 'blur' }
                ],
            }
        }
    };

    productUpdateConfig.mounted = function () {
        var id = this.$route.query.id;
        var self = this;
        var data = {};
        data.id = id;
        this.postData("${siteurl}tenantRest/product/view.htm", data, function (res) {
            if (res.code == 0) {
                self.form = res;
                uenote = initEditor("uenote");;
                uenote.ready(function () {
                    //设置编辑器的内容
                    uenote.setContent(res.note);
                });

                if (res.skus) {
                    self.skus = res.skus;
                }
                if (res.specs) {
                    self.specs = res.specs;
                }
                if (res.groups) {
                    self.groups = res.groups;
                }
                if (res.shop) {
                    self.loadGroups(res.shop);
                }
                if(res.catalogs){
                    self.productCatalogs=res.catalogs;
                }

            }
        });
    }
    productUpdateConfig.computed = {};
    productUpdateConfig.computed.shopOptions = function () {
        return this.$store.state.shopOptions;
    };
    productUpdateConfig.computed.productCatalogOptions = function () {
        return this.$store.state.productCatalogOptions;
    };

    productUpdateConfig.destroyed = function () {
        console.log("destroyed add view ");

        UE.getEditor('uenote').destroy();
    }
    var productUpdateView = Vue.component('update-view', productUpdateConfig);
    //更新组件结束
</script>
[/#macro]